<template>
  <div class="application" v-cloak>
    <h1>羽毛球活动</h1>
    <Label :actSelected="actSelected" :isShow="isShow" ref="label"></Label>
    <Form :times="times" @changeTime="showInformation" :loading="loading" @addApplycant="addApplycant"></Form>
  </div>
</template>
<script>
  import axios from 'axios';
  import Form from './control/Form.vue';
  import Label from './control/Label.vue';

  export default {
    name: 'Application',
    data() {
      return {
        acivities:{},//记录选中的活动信息
        times:[],
        actSelected:{}, //被选中活动的信息
        isShow:false,
        loading: true,
        applycantNumber:0  //当次活动的报名人数
      }
    },
    components:{
      Form,
      Label
    },
    methods: {
      //显示选择时间对应的活动信息
      showInformation(aid) {
        this.actSelected = this.acivities[aid];
        this.isShow = true;
      },
      addApplycant(newApplycant) {
        let number = newApplycant.number;
        this.$refs.label.setNumber(number);
        this.actSelected.people.push(newApplycant);
      }
    },
    beforeCreate() {
      //查询本周的活动
      var me = this;
      var url = 'http://127.0.0.1:1111/api/activities/get/thisWeek';
      axios.get(url).then(function (result) {
        var datas = result && result.data.activities;
        if(datas && datas.length > 0) {
          for(var i=0; i<datas.length; i++) {
            let data = datas[i];
            let obj={
              value: data.aid,
              label: data.time
            };
            me.times.push(obj);
            me.acivities[data.aid] = data;
          }
        }
        me.loading = false;
        me.$message({
          message: '请求成功',
          type: 'success'
        });
      }).catch(function(err){
        me.loading = false;
        me.$message({
          message: '请求失败',
          type: 'error'
        });
      });
    }
  }
</script>
<style>
  .application {
    background-image: url("./../assets/index.png");
    font-size: 14px;
    min-height: calc(100% - 61px);
    margin-top: 61px;
    position: absolute;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .application h1 {
    font-weight: bold;
    font-size: 76px;
    color: #00BC7E;
    letter-spacing: 6px;
    line-height: 100px;
    margin-top: 168px;
    margin-bottom: 0;
  }
  [v-cloak] {
    display: none;
  }

</style>
